* {
    margin: 0;
    padding: 0;
}
.map-box {
    height: 1300px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#four {
    width: 800px;
    height: 600px;
    // background-color: aquamarine;
    float: left;
}
#two {
    width: 800px;
    height: 600px;
    float: left;
    // background-color: aquamarine;
}
#three {
    width: 800px;
    height: 600px;
    float: left;
    // background-color: aquamarine;
    margin-left: 50px;
}
#one {
    width: 800px;
    height: 600px;
    float: left;
    // background-color: aquamarine;
    margin-right: 50px;
    margin-bottom: 50px;
}
@media screen and(max-width: 800px) {
    #four {
        width: 100%;
        float: none;
    }
    #two {
        width: 100%;
        float: none;
    }
    #one {
        width: 100%;
        float: none;
    }
    #three {
        width: 100%;
        float: none;
    }
}